<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染指令 'v-if' & 'v-show'</title>
    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
   <div id="app">
       <!-- v-show 的原理: 动态为元素添加或移除 display: none 样式,来实现元素的显示和隐藏-->
       <!-- v-if 的原理: 每次动态创建或移除元素,实现元素的显示和隐藏-->
       <p v-if="flag">这是被 v-if 控制的元素</p>
       <p v-show="flag">这是被 v-show 控制的元素</p>
       <hr>
       <!-- ‘v-if’ 一般与 ’v-else-if‘ 和 ’v-else‘ 一起用-->
       <div v-if="type === 'A'">优秀</div>
       <div v-else-if="type === 'B'">良好</div>
       <div v-else-if="type === 'C'">一般</div>
       <div v-else>差</div>

   </div>

   <script>
       const vm = new Vue({
           el: '#app',
           data: {
               flag: true,
               type: 'A',

           },
           methods: {

           }
       })
   </script>
</body>
</html>